export default {
  data () {
    return {
      rolesList: [],
      // 添加角色对话框否显示
      addRoulesDialog: false,
      // 添加角色的信息
      addRolesInfo: {},
      // 添加表单验证
      addRolesRules: {
        roleName: [
          { required: true, message: '请填写角色名称', trigger: 'change' }
        ],
        roleDesc: [
          { required: true, message: '请填写角色描述', trigger: 'change' }
        ]
      },
      editRolesInfoDialog: false,
      // 编辑角色信息
      editRolesInfo: {
        roleName: '',
        roleDesc: '',
        id: 0
      },
      // 分配权限显示
      editRightsDialog: false,
      // 添加权限信息
      rightsList: [],
      checkedRightsList: [],
      // 默认展开的数组
      expendRightsList: [],
      rightsTreeInfo: {
        // 数据中的 哪一个显示文本内容
        label: 'authName',
        children: 'children'
      },
      // 角色ID
      roleId: 0
    }
  },
  created () {
    // 请求角色列表
    this.getRolesList()
    // 请求权限列表
    this.getRightsList()
  },
  methods: {
    async getRolesList () {
      const { data } = await this.$get('roles')
      // 给 rolesList 进行赋值
      this.rolesList = data
    },
    // 关闭对话框
    closeAddRoulesDialog () {
      this.$refs.addRoles.resetFields()
      // 重置
      this.addRolesInfo = {}
    },
    // 确定编辑事件
    addRolesHandler () {
      this.$refs.addRoles.validate(async valid => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '请按照规则完整填写表单'
          })
          return
        }
        const { meta } = await this.$post('roles', this.addRolesInfo)
        console.log(meta)
        if (meta.status === 201) {
          this.$message({
            type: 'success',
            message: '创建成功'
          })
          this.getRolesList()
          // 关闭对话框
          this.addRoulesDialog = false
        }
      })
    },
    // 删除用户事件
    deleteRoulesHandler (id) {
      // 利用 confirm 来实现提示删除该角色
      this.$confirm('是否删除该角色?', '删除角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { meta } = await this.$delete(`roles/${id}`)
        if (meta.status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getRolesList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑用户事件
    showEditInfoDialog (val) {
      this.editRolesInfo.id = val.id
      this.editRolesInfo.roleName = val.roleName
      this.editRolesInfo.roleDesc = val.roleDesc
      this.editRolesInfoDialog = true
    },
    // 确认用户编辑事件
    async editRolesHandler () {
      const { meta } = await this.$put(`roles/${this.editRolesInfo.id}`, this.editRolesInfo)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        // 重新请求列表数据
        this.getRolesList()
        // 关闭对话框
        this.editRolesInfoDialog = false
      }
    },
    // 请求权限列表
    async getRightsList () {
      const { data } = await this.$get('rights/tree')
      this.rightsList = data
      // 展开所有项
      data.forEach(item => {
        this.expendRightsList.push(item.id)
        item.children.forEach(t => {
          this.expendRightsList.push(t.id)
        })
      })
    },
    // 展开分配渲染对话框
    showEditRightsHandler (val, id) {
      this.roleId = id
      val.forEach(item => {
        if (!item.children) return
        // 遍历二级权限
        item.children.forEach(t => {
          if (!t.children) return
          // 遍历三级权限
          t.children.forEach(t2 => {
            this.checkedRightsList.push(t2.id)
          })
        })
      })
      // 展开对话框
      this.editRightsDialog = true
    },
    // 关闭事件对话框的处理函数
    closeRightsDialog () {
      this.checkedRightsList = []
    },
    async editRightHandler () {
      // 拿到所有选中的ID
      const checkedIds = this.$refs.rightsTree.getCheckedKeys()
      // 拿到半选的ID
      const halfCheckedIds = this.$refs.rightsTree.getHalfCheckedKeys()
      const rids = [...checkedIds, ...halfCheckedIds] + ''
      const { meta } = await this.$post(`roles/${this.roleId}/rights`, { rids })
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '分配权限成功'
        })
        // 重新请求列表
        this.getRolesList()
        // 关闭对话框
        this.editRightsDialog = false
      }
    },
    // 删除单一权限
    async deleteRightHandler (roleId, rightId) {
      const { meta } = await this.$delete(`roles/${roleId}/rights/${rightId}`)
      console.log(meta)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '删删除单一权限成功'
        })
        let rights = []
        // 遍历自己想要的 数组
        for (let i = 0; i < this.rolesList.length; i++) {
          if (this.rolesList[i].id === roleId) {
            rights = this.rolesList[i].children
          }
        }
        // 遍历 rights 进行
        for (let i = 0; i < rights.length; i++) {
          const first = rights[i]
          // 找到要删除的数据
          if (first.id === rightId) {
            rights.splice(i, 1)
            break
          }
          for (let j = 0; j < first.children.length; j++) {
            const second = first.children[j]
            if (second.id === rightId) {
              first.children.splice(j, 1)
              break
            }
            for (let j = 0; j < second.children.length; j++) {
              const third = second.children[j]
              if (third.id === rightId) {
                second.children.splice(j, 1)
                break
              }
            }
          }
        }
      }
    }
  }
}
